<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div class="main" v-if="zfNameflag">
    <div>
      <parklist :getParkCodeOnly="parkChange" :getParkNameMap="getParkName"></parklist>
    </div>
    <div class="energy-head">
      <div style="margin-left: 20px;">
        <span style="color: #333333;font-size: 14px;">年份：</span>
      </div>
      <el-date-picker
        style="width:240px;color:#fff;"
        v-model="selectYear"
        type="year"
        :picker-options="pickerOptions"
        :clearable="false"
        :editable="false"
        value-format="yyyy"
        @change="yearChange"
        placeholder="请选择年份">
      </el-date-picker>
    </div>
    <div class="top">

      <div class="top-first">
        <div class="top-title">化工园区万元能耗产值（吨标煤/万元）</div>
        <div id="annular1" style="width: 100%;height:380px;padding:0 25px;"></div>
        <div v-if="topOneShow === 1" style="color: #909399;margin-top: 100px;margin-left: 200px;"> 暂无数据</div>
      </div>

      <div class="top-two">
        <div class="top-title">浙江省化工园区累计总能消耗（吨标煤）</div>
        <div class="bottom-tab" style="height: 388px;">
          <span style="color: #333333;font-size: 14px;">能源介质：</span>
          <el-select class="select" style="width: 170px;margin-bottom: 20px;" v-model="energyType" placeholder="请选择能源介质" @change="energyTypeChange">
            <el-option v-for="item in energyTypeList" :key="item.code" :label="item.remark" :value="item.code">
            </el-option>
          </el-select>
          <el-table
            :data="tableData1"
            height="310px"
            :row-style="{height:'32px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
            style="width: 100%;">
            <el-table-column type="index" align="center" :index="indexMethod" label="排名" width="60px"></el-table-column>
            <!-- <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
            <el-table-column prop="parkName" label="园区名称">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                  <span>{{scope.row.parkName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="energyValue" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="用量（吨）"></el-table-column>
            <el-table-column prop="proportion" :formatter="proportionFormatCount" align="center" :show-overflow-tooltip="true" label="能耗占比"></el-table-column>
          </el-table>
        </div>
      </div>

      <div class="top-first">
        <div class="top-title">化工园区万元能耗增加值（吨标煤/万元）</div>
        <div id="annular2" style="width: 100%;height:380px;padding:0 25px;"></div>
        <div v-if="topTwoShow === 1" style="color: #909399;margin-top: 100px;margin-left: 200px;"> 暂无数据</div>
      </div>
    </div>
    <div class="bottom">

      <div class="bottom-first">
        <div class="bottom-title">园区能源用能额度分析</div>
        <div class="bottom-tab">
          <el-table
            :data="tableData2"
            max-height="370px"
            :row-style="{height:'32px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
            style="width: 100%;">
            <el-table-column type="index" align="center" :index="indexMethod" label="排名" width="60px"></el-table-column>
            <!-- <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
            <el-table-column prop="parkName" label="园区名称">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                  <span>{{scope.row.parkName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="usedAmount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="已用额度"></el-table-column>
            <el-table-column prop="energyValue" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="总额度"></el-table-column>
          </el-table>
        </div>
      </div>

      <div class="bottom-two">
        <div class="bottom-title-two">浙江省化工园区月度能耗排名</div>
        <div class="bottom-tab">
          <span style="color: #333333;font-size: 14px;">月份：</span>
          <el-select
            class="select"
            style="width: 150px;margin-bottom: 20px;"
            placeholder="请选择月份"
            v-model="selectMonth"
            @change="monthChange">
            <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>
          <!-- <el-date-picker
            style="width:150px;color:#fff;margin-bottom: 20px;"
            v-model="selectMonth"
            type="month"
            :picker-options="pickerOptions"
            :clearable="false"
            :editable="false"
            value-format="yyyyMM"
            @change="monthChange"
            placeholder="请选择月份">
          </el-date-picker> -->
          <el-table
            :data="tableData3"
            max-height="370px"
            :row-style="{height:'32px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
            style="width: 100%;">
            <el-table-column type="index" align="center" :index="indexMethod" label="排名" width="60px"></el-table-column>
            <!-- <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
            <el-table-column prop="parkName" label="园区名称">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                  <span>{{scope.row.parkName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="energyValue" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="总耗能"></el-table-column>
            <el-table-column prop="usedAmount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="同比"></el-table-column>
          </el-table>
        </div>
      </div>

      <div class="bottom-first">
        <div class="bottom-title">主要产品单位产品能耗排名</div>
        <div class="bottom-tab">
          <el-table
            :data="tableData4"
            max-height="390px"
            :row-style="{height:'32px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
            style="width: 100%;">
            <el-table-column type="index" align="center" :index="indexMethod" label="排名" width="60px"></el-table-column>
            <!-- <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
            <el-table-column prop="parkName" label="园区名称">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                  <span>{{scope.row.parkName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="usedAmount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="总产量（吨）"></el-table-column>
            <el-table-column prop="energyValue" :formatter="formatCount" align="center" width="120px" :show-overflow-tooltip="true" label="单位产品耗能（吨标煤/吨）"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi';
const echarts = require('echarts')
export default {
  components: { parklist },
  name: 'energyConsumption',
  data () {
    return {
      parkNameMap: new Map(),
      selectYear: '',
      selectMonth: '',
      monthList: [
        { value: '01', label: '一月', disabled: false },
        { value: '02', label: '二月', disabled: false },
        { value: '03', label: '三月', disabled: false },
        { value: '04', label: '四月', disabled: false },
        { value: '05', label: '五月', disabled: false },
        { value: '06', label: '六月', disabled: false },
        { value: '07', label: '七月', disabled: false },
        { value: '08', label: '八月', disabled: false },
        { value: '09', label: '九月', disabled: false },
        { value: '10', label: '十月', disabled: false },
        { value: '11', label: '十一月', disabled: false },
        { value: '12', label: '十二月', disabled: false }
      ],
      energyType: '',
      energyTypeList: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],

      topOneShow: 0,
      topTwoShow: 0,
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth(), 0)
        }
      },
      zfNameflag: true,
      option1: {},
      option2: {},
      myChart1: {},
      myChart2: {},
      option1Data: [],
      option1XData: [],
      option2Data: [],
      option2XData: []
    }
  },
  // created () {
  //   console.log(dd);
  //   if (dd !== undefined) {
  //     dd.getAuthCode({}).then(res =>{
  //       if (res) {
  //         let params = {
  //           applicationFlag: '20',
  //           authCode: res.auth_code
  //         }
  //         this.$http.post(`/home/sys/loginfree/authentication`, params)
  //           .then(({ data: res }) => {
  //             console.log('res2:',res);
  //             this.$store.commit('zfName', res.data.lastName)
  //             if (res.code !== 0) {
  //               this.zfNameflag = false
  //             }
  //           }).catch(() => {
  //             this.zfNameflag = false
  //           })
  //       }
  //     }).catch(() => {
  //       this.zfNameflag = false
  //     })
  //   } else {
  //     this.$message.error('请在浙政钉环境下浏览该页面！');
  //   }
  // },
  // 调用
  mounted () {
    this.initDate()
    this.getEnergyType()

    window.onresize = () => {
      this.myChart1.resize()
      this.myChart2.resize()
    }
  },
  methods: {
    getParkName (map) {
      this.parkNameMap = map
    },
    getNameByAbbreviation (key) {
      return this.parkNameMap.get(key)
    },
    // 切换园区
    parkChange (data) {
      this.$http.get(`/home/chemical/parkInfo/selectParkAll`, {}
      ).then(({ data: res }) => {
        res.data.forEach(item => {
          if (item.code === data) {
            sessionStorage.setItem('routeName1', item.nameAbbreviation)
            this.$router.push({
              name: 'zfEnergyConsumptionDetail',
              query: {
                data: data
              }
            })
          }
        })
      })
    },
    initDate () {
      let today = new Date()
      let lastMonth = new Date(today.getFullYear(), today.getMonth(), 0)
      this.selectYear = lastMonth.getFullYear() + ''
      this.selectMonth = (lastMonth.getMonth() < 9) ? '0' + (lastMonth.getMonth() + 1) : (lastMonth.getMonth() + 1)
      this.monthList.forEach(item => {
        if (item.value > this.selectMonth) {
          item.disabled = true
        }
      })
    },
    indexMethod (index) {
      return index + 1
    },
    getEnergyType () {
      this.$http
        .post(`/home/chemical/energyConsumption/getSysDictByName`, {})
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.energyTypeList = res.data
            this.energyType = this.energyTypeList[0].code
            this.getEnergyConsumption()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    yearChange (value) {
      this.selectYear = value
      this.selectMonth = '01'
      if (value === (new Date().getFullYear() + '')) {
        let today = new Date()
        let lastMonth = new Date(today.getFullYear(), today.getMonth(), 0)
        let month = (lastMonth.getMonth() < 9) ? '0' + (lastMonth.getMonth() + 1) : (lastMonth.getMonth() + 1)
        this.monthList.forEach(item => {
          if (item.value > month) {
            item.disabled = true
          }
        })
      } else {
        this.monthList.forEach(item => {
          item.disabled = false
        })
      }
      this.getEnergyConsumption()
    },
    energyTypeChange (value) {
      this.energyType = value
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovYearConsumsPark`,
          {
            energyCode: this.energyType,
            year: this.selectYear
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData1 = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    monthChange (value) {
      this.selectMonth = value
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovMonthConsumsPark`,
          {
            months: this.selectYear + this.selectMonth
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData3 = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    formatCount (row, column, cellValue, index) {
      if (cellValue && cellValue !== '') {
        return cellValue
      } else {
        return '—'
      }
    },
    proportionFormatCount (row, column, cellValue, index) {
      if (cellValue && cellValue !== '') {
        return cellValue + '%'
      } else {
        return '—'
      }
    },
    getEnergyConsumption () {
      this.$http
        .post(`/home/chemical/energyConsumption/getEnergyConsumption`,
          {
            energyCode: this.energyType,
            year: this.selectYear,
            months: this.selectYear + this.selectMonth
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            // 上一
            if (res.data.emsGovAreaConsums.length > 0) {
              this.option1Data = res.data.emsGovAreaConsums[0]
              this.option1XData = res.data.emsGovAreaConsums[1]
              this.topOneShow = 0
            } else {
              this.option1Data = []
              this.option1XData = []
              this.topOneShow = 1
            }
            this.renderMyChart1()

            this.tableData1 = res.data.emsGovYearConsums
            this.tableData2 = res.data.emsGovEnergyQuotasList
            this.tableData3 = res.data.emsGovMonthConsums
            this.tableData4 = res.data.emsGovProductConsumsList

            // 上三
            if (res.data.emsGovIndustryConsums.length > 0) {
              this.option2Data = res.data.emsGovIndustryConsums[0]
              this.option2XData = res.data.emsGovIndustryConsums[1]
              this.topTwoShow = 0
            } else {
              this.option2Data = []
              this.option2XData = []
              this.topTwoShow = 1
            }
            this.renderMyChart2()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))

      this.option1 = {
        color: ['#2690F3'],
        grid: {
          left: '17%',
          top: '3%',
          bottom: '10%'
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 6,
            yAxisIndex: [0],
            zoomLock: true
          }
        ],
        xAxis: {
          show: true,
          min: 0
        },
        yAxis: {
          inverse: true,
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option1XData,
          axisLabel: {
            width: 60,
            overflow: 'break'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            data: this.option1Data,
            type: 'bar',
            min: 0,
            barWidth: '12px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))

      this.option2 = {
        color: ['#2690F3'],
        grid: {
          left: '17%',
          top: '3%',
          bottom: '10%'
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 7,
            yAxisIndex: [0],
            zoomLock: true
          }
        ],
        xAxis: {
          show: true,
          min: 0
        },
        yAxis: {
          inverse: true,
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option2XData,
          axisLabel: {
            width: 60,
            overflow: 'break'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            data: this.option2Data,
            type: 'bar',
            min: 0,
            barWidth: '12px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      this.myChart2.setOption(this.option2)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  padding: 20px 20px 40px 20px;
}
.top {
  width: 100%;
  display: flex;
  .top-first {
    width: 32.4%;
    height: 446px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .top-title {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
  .top-two {
    width: 32.4%;
    height: 446px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    margin-left: 1.4%;
    margin-right: 1.4%;
    border-radius: 4px;
    .top-title {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
}
.bottom-tab {
  width: 100%;
  padding: 0px 30px 10px 30px;
}
.bottom {
  width: 100%;
  display: flex;
  margin-top: 20px;
  .bottom-first {
    width: 32.4%;
    height: 499px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .bottom-title {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
  .bottom-two {
    width: 32.4%;
    height: 499px;
    margin: 0 1.4%;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .bottom-title-two {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
}
/deep/ .el-input__inner {
  height: 34px;
  line-height: 34px;
}
/deep/ .el-input__icon {
  line-height: 34px;
}
.energy-head {
  background: #FFFFFF;
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #F0F0F0;
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
}
</style>
